<!-- 订单详情 -->
<template>
    <div class="lifePayCostBillDetail">
        <van-nav-bar title="订单详情" fixed placeholder left-arrow :border="false" @click-left="onClickLeft"/>
        <div class="headStatus flex flexColumn alignCenter justifyCenter">
            <div class="statusImg">
                <img v-if="order.orderStatus == '1' || order.orderStatus == '5' || order.orderStatus == '8'" src="@/assets/lifePayCost/detailStatusSuccess.png" alt="">
                <img v-else-if="order.orderStatus == '2' || order.orderStatus == '7'" src="@/assets/lifePayCost/detailStatusFail.png" alt="">
                <img v-else src="@/assets/lifePayCost/detailStatusBeging.png" alt="">
            </div>
            <div class="statusDesc">{{externalOrderStatus(order.orderStatus)}}</div>
        </div>
        <div class="content">
            <div class="contentHead flex flexColumn alignCenter justifyCenter">
                <span>已到账</span>
                <div>￥{{order.arrivalAmount}}</div>
            </div>
            <div class="flex justifyBetween item">
                <span>充值面额：</span>
                <div>{{order.facePrice}}</div>
            </div>
            <div class="flex justifyBetween item">
                <span>支付金额：</span>
                <div>{{order.price}}</div>
            </div>
            <div v-if="order.orderStatus == '5' || order.orderStatus == '8'" class="flex justifyBetween item">
                <span>退款金额：</span>
                <div>{{order.refundAmount}}</div>
            </div>
            <div class="flex justifyBetween item">
                <span>订单号：</span>
                <div>{{order.orderCode}}</div>
            </div>
            <div v-if="order.orderStatus == '2' || order.orderStatus == '8' || order.orderStatus == '5'" class="flex justifyBetween item">
                <span>失败原因：</span>
                <div>{{order.failureReason}}</div>
            </div>
            <div class="flex justifyBetween item" v-else>
                <span>充值时间：</span>
                <div>{{order.createTime}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { NavBar } from 'vant';
export default {
    components: {
        [NavBar.name]: NavBar,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const order = JSON.parse(proxy.$route.params.order);
        console.log(order,'order')

        // 返回上一页
        const onClickLeft = () => history.back();

        return {
            onClickLeft,
            order,
        }
    }
}

</script>
<style scoped>
.lifePayCostBillDetail{
    min-height: 100vh;
    background: url('../../assets/lifePayCost/electricityChargeHeadNanBg.png') no-repeat;
    background-size: 100%;
    box-sizing: border-box;
}
.lifePayCostBillDetail /deep/ .van-nav-bar{
    background: none;
}
.lifePayCostBillDetail /deep/ .van-icon{
    color: #FFFFFF;
}
.lifePayCostBillDetail /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}

.headStatus .statusImg{
    width: 107px;
    height: 107px;
}
.statusImg img{
    width: 100%;
}
.statusDesc{
    color: #FCDCA7;
    font-size: 19px;
    font-weight: 500;
}

.content{
    width: 333.5px;
    min-height: 356px;
    margin: 30px auto 0;
    background: url('../../assets/lifePayCost/lifePayCostBillDetailContentBg.png') no-repeat;
    background-size: 100%;
    margin-bottom: 50px;
    box-sizing: border-box;
}
.contentHead{
    height: 108px;
    font-size: 30px;
    font-weight: 500;
    color: #333333;
}
.contentHead span{
    font-size: 19px;
    color: #535353;
}
.item{
    height: 30px;
    padding: 0 20px;
    font-size: 15px;
    color: #333333;
}
.item span{
    font-size: 13px;
    color: #999999;
}
</style>